<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生管理系统</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
</head>
<body>
  <div class="navbar navbar-default n-header" role="navigation">
    <div class="container-fluid n-header-wrapper">
      <a class="navbar-brand jx-logo" href="#">
        <img src="./image/logo2.jpg" alt="学生管理系统">
      </a>
      <div class="navbar-wrapper">
        <ul class="nav navbar-nav nav-items">
            <li>
                <a class="nav-item" href="#" data-toggle="modal" data-target="#infoModal">
                    <span>消息</span>
                </a>
            </li>
            <li>
                <a class="nav-item" href="#" data-toggle="modal" data-target="#setModal">
                    <span>设置</span>
                </a>
            </li>
            <li class="dropdown">
                <a class="nav-item dropdown-toggle" href="#" data-toggle="dropdown">
                    <span>安全退出</span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="./login.html">退出</a>
                    </li>
                    <li>
                        <a href="#">注销</a>
                    </li>
                    <li>
                        <a href="#">切换账号</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">帮助</a>
                    </li>
                </ul>
            </li>
        </ul>
      </div>
    </div>
  </div>
  <div style="clear: both;"></div>
  <!-- 顶部导航栏结束 -->
  <div class="main">
    <div class="container-fluid main-content">
      <div class="row mian-row">
        <div class="col-md-2 col-lg-2 left">
          <div class="current-user">
            <span>当前用户:</span>
            <span class="uname">Admin</span>
          </div>
          <div class="class-div">
            <ul class="class-list">
              <li>1班</li>
              <li>2班</li>
            </ul>
          </div>
        </div>
        <div class="col-md-10 col-lg-10 right">
          <div class="right-content">
            <!-- 头部 -->
            <div class="right-header">
              <span>当前: 首页-</span>
              <span class="right-class">01班</span>
            </div>
            <!-- 班级和搜索框 -->
            <div class="right-info">
              <div class="col-md-8">
                <span class="right-class">01班</span>
              </div>
              <div class="col-md-4">
                <div class="searchBox fr">
                  <div class="searchInput fl">
                    <input type="text" placeholder="用户名">
                  </div>
                  <div class="searchBtn fl">
                    <input type="submit">
                  </div>
                </div>
              </div>
            </div>
            <!-- 按钮组 -->
            <div class="col-md-12">
              <div class="right-btns">
                <button class="btn btn-default add-stu-btn" data-toggle="modal" data-target="#myModal">添加</button>
                <button class="btn btn-info">编辑</button>
                <button class="btn btn-danger">删除</button>
                <button class="btn btn-success">账号授权</button>
              </div>
            </div>
            <!-- 学生信息 -->
            <div class="col-md-12">
              <table class="table table-hover">
                <thead>
                  <tr>
                    <th style="width: 2%;">
                      <input class="all-check" type="checkbox">
                    </th>
                    <th style="width: 10%;">姓名</th>
                    <th style="width: 10%;">学号</th>
                    <th style="width: 15%;">手机号</th>
                    <th style="width: 8%;">性别</th>
                    <th style="width: 8%;">年龄</th>
                    <th style="width: 20%;">专业</th>
                    <th style="width: 27%;">操作</th>
                  </tr>
                </thead>
                <tbody class="studnet-info">
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 消息Modal -->
  <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="infoModalLabel">站内信</h4>
        </div>
        <div class="modal-body">
          <ul>
            <li>
              <a href="#">【系统消息】您已被选中花呗免还款！</a>
            </li>
            <li>【系统消息】您已被选中信用卡免还款！</li>
            <li>【警方提示】勿信虚假消息！</li>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 设置Modal -->
  <div class="modal fade" id="setModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="setModalLabel">系统设置</h4>
        </div>
        <div class="modal-body">
          <ul>
            <li><input type="checkbox" name="" id=""></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <!-- 新增&编辑 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">
            <span class="stu-title">新增</span>学生信息
          </h4>
        </div>
        <div class="modal-body stu-modal-body">
          <div class="col-md-12">
            <div class="col-md-4">
                <div class="e-tr">
                    <label class="e-td" for="">姓名</label>
                    <input class="e-td e-input e-name" type="text" placeholder="">
                </div>
            </div>
            <div class="col-md-4">
                <div class="e-tr">
                    <label class="e-td" for="">学号</label>
                    <input class="e-td e-input e-sno" type="text" placeholder="">
                </div>
            </div>
            <div class="col-md-4">
                <div class="e-tr">
                    <label class="e-td" for="">手机号</label>
                    <input class="e-td e-input e-tel" type="text" placeholder="">
                </div>
            </div>
            <div class="col-md-4" role="form">
                <div class="e-tr">
                    <label class="e-td" for="">性别</label>
                    <select id="u-select" class="e-select" style="background-color: #fff;">
                        <option value="m">男</option>
                        <option value="f">女</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="e-tr">
                    <label class="e-td" for="">年龄</label>
                    <input class="e-td e-input e-age" type="text" placeholder="">
                </div>
            </div>
            <div class="col-md-4">
                <div class="e-tr">
                    <label class="e-td" for="">专&nbsp;&nbsp;&nbsp;&nbsp;业</label>
                    <input class="e-td e-input e-major" type="text" placeholder="">
                </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary addEditBtn">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除 -->
  <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="delModalLabel">提示</h4>
        </div>
        <div class="modal-body">
          <p>确定要删除吗？</p>
          <p>此操作不可恢复</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary del-sure">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal -->
  <script src="./js/ls.js"></script>
  <script src="./js/json.js"></script>
  <script>
    $(function () {

      // 左侧激活班级的索引
      var classIndex = 0;
      // 右侧学生所在行的索引
      var trIndex = 0;
      // 所有的学生信息来自json.js
      var studnetArr = [students_json_01.data, students_json_02.data];

      saveStuInfo(false)
      showUserName();
      showCurrentClass();
      showStuInfo();

      // 学生信息的本地持久存储
      function saveStuInfo (flag) {
        // 没有localStorage，或者有数据需要更新，就存到本地
        if(!localStorage.getItem('stuInfo') || flag) {
          var stuStr = JSON.stringify(studnetArr)
          localStorage.setItem('stuInfo', stuStr);
          console.log('update')
        }else {
        // 有localStorage，就用这个
          studnetArr = JSON.parse(localStorage.getItem('stuInfo'))
        } 
      }
      // 显示当前用户
      function showUserName () {
        var uname = get_value_from_storage('USERID');
        $('.uname').html(uname);
      }

      // 显示当前所有班级
      function showCurrentClass () {
        // class_json来自json.js
        var classArr = class_json.data;
        var liContent = '';
        for(var i = 0; i < classArr.length; i ++) {
          liContent += '<li data-index=' + i +'>' + classArr[i].classname + '</li>'
        }
        $('.class-list').html(liContent);
        $('.class-list li').eq(0).addClass('active');
      }

      // 点击班级列表，切换学生信息
      $('.class-list').delegate('li', 'click', function() {
        $('.class-list li').removeClass('active');
        $(this).addClass('active');
        // 更新班级索引
        classIndex = $(this).attr('data-index');
        // 更新右侧班级名称
        var classTxt = $(this).html();
        $('.right-class').html(classTxt);
        showStuInfo();
      })

      // 显示学生信息
      function showStuInfo () {
        var studnetContent = '';
        for(var i = 0; i < studnetArr[classIndex].length; i ++) {
          studnetContent += "<tr data-index="+i+"><td><input class='stu-check' type='checkbox'></td>"+
            " <td>" + studnetArr[classIndex][i].truename + "</td>" +
            " <td>" + studnetArr[classIndex][i].sno + "</td>" +
            " <td>" + studnetArr[classIndex][i].tel + "</td> " +
            " <td>" + (studnetArr[classIndex][i].gender == 'm' ? '男' : '女') + "</td> " +
            " <td>" + studnetArr[classIndex][i].age + "</td> " +
            " <td>" + studnetArr[classIndex][i].major + "</td> " +
            " <td><button class='btn btn-edit btn-info btn-index' data-toggle='modal' data-target='#myModal'>编辑</button>" +
            " <button class='btn btn-del btn-danger btn-index' data-toggle='modal' data-target='#delModal'>删除</button></td></tr>"
        }
        $('.studnet-info').html(studnetContent);
      }
      
      // 获取学生在本班级中的序号
      $('.studnet-info').delegate('.btn-index', 'click', function() {
        trIndex = $(this).parents('tr').attr('data-index');
      })

      // 编辑学生信息
      $('.studnet-info').delegate('.btn-edit', 'click', function() {
        $('.stu-title').html('编辑');
        var stu = studnetArr[classIndex][trIndex];
        // 讲该学生的信息填入对应输入框
        $('.e-name').val(stu.truename);
        $('.e-sno').val(stu.sno);
        $('.e-tel').val(stu.tel);
        $('.e-select').val(stu.gender);
        $('.e-major').val(stu.major);
        $('.e-age').val(stu.age);
        // 当前编辑状态：编辑
        $('.addEditBtn').attr('edit-status', 'edit');
      })

      // 新增学生信息
      $('.add-stu-btn').click(function() {
        // 置空输入框
        $('.e-name').val('');
        $('.e-sno').val('');
        $('.e-tel').val('');
        $('.e-select').val('m');
        $('.e-major').val('');
        $('.e-age').val('');
        // 当前编辑状态：新增
        $('.addEditBtn').attr('edit-status', 'add');
      })

      // 新增或编辑学生的保存按钮
      $('.addEditBtn').click(function () {
        var stu = {};
        // 获取输入框中的学生数据
        stu.truename = $('.e-name').val();
        stu.sno = $('.e-sno').val();
        stu.tel = $('.e-tel').val();
        stu.gender = $('.e-select').val();
        stu.major = $('.e-major').val();
        stu.age = $('.e-age').val();
        // 判断是新增还是编辑
        var status = $(this).attr('edit-status');
        if(status === 'add'){
          studnetArr[classIndex].push(stu);
        } else {
          studnetArr[classIndex].splice(trIndex * 1, 1, stu);
        }
        // 用新的数据更新页面
        showStuInfo();
        saveStuInfo(true);
        // 关闭模态框
        $('#myModal').modal('hide');
      })

      // 删除学生信息
      $('.del-sure').click(function() {
        // 删掉对应的学生信息
        studnetArr[classIndex].splice(trIndex * 1, 1);
        // 用新的数据更新页面
        showStuInfo();
        saveStuInfo(true);
        // 关闭模态框
        $('#delModal').modal('hide');
      })

      // 点击全选按钮
      $('.all-check').change(function() {
        var flag = $(this).prop('checked');
        // $().each是备选方案
        $('.stu-check').prop('checked', flag)
      })

      // 点击每一项
      $('.stu-check').on('change', function() {
        if($('.stu-check:checked').length == $('.stu-check').length) {
          $('.all-check').prop('checked', true);
        }else {
          $('.all-check').prop('checked', false);
        }
        // 追求极致简洁的代码，损失了可读性：
        // $('.all-check').prop('checked', $('.stu-check:checked').length == $('.stu-check').length);
      })

    })

  </script>
</body>
</html>